<template>

  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    top="5vh"
    @close="close"
  >
    <el-form ref="form" :model="log" class="form" label-position="right" label-width="100px">
      <el-row>
        <el-col span="12">
          <el-form-item label="标题" prop="title">{{ log.title }}</el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="请求方式" prop="requestType">{{ log.requestType }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="12">
          <el-form-item label="ip地址" prop="ip">{{ log.ip }}</el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="客户端名称" prop="clientName">{{ log.clientName }}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="请求参数" prop="requestParams">{{ log.requestParams }}</el-form-item>
      <el-form-item label="响应结果" prop="response">{{ log.response }}</el-form-item>
      <el-row>
        <el-col span="12">
          <el-form-item label="操作人" prop="createUserName">{{ log.createUserName }}</el-form-item>
        </el-col>
        <el-col span="12">
          <el-form-item label="请求时间" prop="createTime">{{ log.createTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="12">
          <el-form-item label="操作状态" prop="state">{{ log.state }}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { find } from '@/api/monitor/time-task-log'

export default {
  name: 'LogForm',
  props: {
    id: {
      type: Number,
      default: null
    },
    title: {
      type: String,
      default: '日志详情'
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      log: { title: '', requestType: '', ip: '', clientName: '', requestParams: '', response: '',
        createUserName: '', createTime: '', state: '' }
    }
  },
  watch: {
    id(val) {
      if (val) { this.find() }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
      this.$emit('update:id', null)
    },
    async find() {
      const { data } = await find(this.id)
      this.log = data
    }
  }
}
</script>

<style scoped>
</style>
